<template>
    <div class="main">
        <el-card class="box-card" :body-style="{height: '100%'}">
            <!-- 搜索栏 -->
            <el-row class="search" style="display: flex;">
                <span class="title">菜品：</span>
                <el-input v-model="form.query.mname" placeholder="请输入内容" clearable></el-input>
                <el-button @click="getMenu()">搜索</el-button>
                <el-button type="primary" @click="showMenu(null)">添加</el-button>
            </el-row>
            <!-- 表格 -->
            <el-table v-loading="loading" :data="tableData" border style="width: 100%">
                <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
                <el-table-column prop="mname" label="菜名" width="150"></el-table-column>
                <el-table-column prop="mprice" label="价格(￥)" align="center" width="150"></el-table-column>
                <el-table-column prop="mphoto" label="图片" align="center" width="200">
                    <template slot-scope="scope">
                        <span style="color: blue; cursor: pointer" @click="showImg(scope.row.mphoto)">查看</span>
                    </template>
                </el-table-column>
                <el-table-column prop="mremark" label="备注" show-overflow-tooltip></el-table-column>
                <el-table-column prop="name" label="操作" width="200"  align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="showMenu(scope.row)">编辑</el-button>
                        <el-button type="danger" @click="deleteMenu(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!--查看图片弹窗 -->
        <el-dialog
        title="查看图片"
        :visible.sync="imgVisible"
        width="500px">
            <img :src="showImgUrl" alt="" style="width: 100%;">
        </el-dialog>
        <!-- 新增编辑弹窗 -->
        <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        top="5vh"
        width="500px">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="菜名：" prop="mname">
                    <el-input el-input v-model="ruleForm.mname" placeholder="请输入菜名"></el-input>
                </el-form-item>
                <el-form-item label="价格：" prop="mprice">
                    <el-input el-input v-model="ruleForm.mprice" placeholder="请输入价格"></el-input>
                </el-form-item>
                <el-form-item label="备注：">
                    <el-input type="textarea" :rows="2" placeholder="请输入备注" v-model="ruleForm.mremark"></el-input>
                </el-form-item>
                <el-form-item label="图片：" prop="age">
                    <el-upload
                    class="avatar-uploader"
                    action="http://159.75.205.204:8888/menu/fileUpload"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data () {
        return {
            form: {// 搜索参数
                query: {
                    id: "",
                    mname: "",
                    mprice: "",
                    mphoto: "",
                    mremark: ""
                },
                pageInfo: {
                    pageNum: 1,
                    pageSize: 200
                }
            },
            imageUrl: '',// 编辑弹窗图片地址
            showImgUrl: '',// 查看图片弹窗地址
            imgVisible: false, //是否查看图片
            dialogVisible: false, //编辑弹窗是否显示
            tableData: [], //表格数据
            ruleForm: { // 表单数据
                mname: '',
                mprice: '',
                mphoto: '',
                mremark: '',
            },
            rules: { // 验证规则
                mname: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
                mprice: [
                    { required: true, message: '请输入价格', trigger: 'blur' },
                ],
            },
            loading: false, //是否加载种
            title: '',
            menuData: '',
        }
    },
    mounted() {
        //页面加载时获取菜品数据
        this.getMenu()
    },
    methods: {
        //根据图片地址，打开图片查看弹窗，显示图片
        showImg (url) {
            this.showImgUrl = url
            this.imgVisible = true
        },
        // 处理图片上传成功，将图片地址赋值保存
        handleAvatarSuccess(res, file) {
            console.log(res,file)
            this.imageUrl = 'http://159.75.205.204:8888/images/getImg/' + res;
        },
        // 获取菜品
        getMenu () {
            this.loading = true
            this.$http.post('menu/queryAllMenuUnit', this.form).then(res => {
                this.loading = false
                if (res.data.meta.status == 200) {
                    console.log(res.data)
                    this.tableData = res.data.data.list
                } else {
                    this.$message({type: 'error', message: '获取失败'})
                }
            })
        },
        // 表单点击确认
        confirm () {
            this.$refs['ruleForm'].validate((valid) => {// 预验证
                if (valid) {
                    if (this.title == '编辑菜品') { // 如果时编辑，则用编辑请求处理
                        this.editMenu()
                        return
                    }
                    this.ruleForm.mphoto = this.imageUrl
                    this.$http.post('menu/insertMenu',this.ruleForm).then(res => {// 请求表单添加
                        if (res.data.meta.status == 200) {
                            this.dialogVisible = false
                            this.$message({type: 'success', message: '添加成功'})
                            this.getMenu()
                        } else {
                            this.$message({type: 'error', message: '添加失败'})
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // 展示弹窗
        showMenu (data) {
            console.log(data)
            // 重置图片地址
            this.imageUrl = ''
            // 如果有传数据过来就是编辑
            if (data) {
                this.ruleForm.id = ''
                this.title = '编辑菜品',
                this.ruleForm = data
                if (data.mphoto) {
                    this.imageUrl = data.mphoto
                }
                this.dialogVisible = true
                return
            }
            this.title = '新增菜品',
            this.ruleForm = {
                mname: '',
                mprice: '',
                mphoto: '',
                mremark: '',
            }
            this.dialogVisible = true
        },
        // 编辑菜品
        editMenu () {
            this.ruleForm.mphoto = this.imageUrl
            this.$http.post('menu/updateMenu', this.ruleForm).then(res => {
                if (res.data.meta.status == 200) {
                    this.$message({type: 'success', message: '修改成功'})
                    this.dialogVisible = false
                    this.getMenu()
                } else {
                    this.$message({type: 'error', message: '修改失败'})
                }
            })
        },
        // 根据id删除菜品
        deleteMenu (id) {
            this.$http.put('menu/deleteMenuById/' + id).then(res => {
                if (res.data.meta.status == 200) {
                    this.$message({type: 'success', message: '删除成功'})
                    this.getMenu()
                } else {
                    this.$message({type: 'error', message: '删除失败'})
                }
            })
        }
    }
}
</script>

<style scoped>
.main {
    height: 100%;
}
.el-table {
    height: calc(100% - 150px);
    overflow: auto;
}
.el-card {
    height: 100%;
}
.el-card__body {
    height: 100%;
}
.search {
    display: flex;
    margin-bottom: 20px;
}
.search .title {
    display: block;
    margin-right: 10px;
    text-align: right;
    line-height: 35px;
}
.search .el-input, .search .el-select, .search .el-date-picker {
    margin-right: 40px;
    width: 200px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px solid #F2F2F2;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>